<template>
  <div class="top">
    <ul>
      <li v-for="item in navList" @click="btnRouter(item.path)" :class="{ active: item.isActive }">{{ item.name }}</li>
    </ul>
    <input type="text" v-model="keyword" placeholder="搜索文章" @input="btnkeyword">
    <span class="buddha">{{ UserStore.UserName }}</span>
  </div>
  <div class="content">
    <RouterView></RouterView>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/store/User.js'

let router = useRouter()
let route = useRoute()
let UserStore = useUserStore()
let keyword = ref('')
const navList = ref([
  { name: '首页', path: 'home', isActive: false },
  { name: '分类', path: 'classify', isActive: false },
  { name: '创作', path: 'creation', isActive: false },
  { name: '反馈', path: 'feedback', isActive: false },
]);
let tmpTimeOut = null

function btnkeyword() {
  clearTimeout(tmpTimeOut)
  tmpTimeOut = setTimeout(() => {
    router.push({
      path: `/home/newest`,
      query:{
        keyword:keyword.value
      }
    })
  }, 700)
}

function btnRouter(RearPath, frontPath) {
  if (frontPath) {
    navList.value.forEach(item => {
      item.isActive = (item.path === frontPath)
    })
    router.push(`/${frontPath}/${RearPath}`)
  } else {
    navList.value.forEach(item => {
      item.isActive = (item.path === RearPath)
    })
    router.push(`/${RearPath}`)
  }
}

onMounted(() => {
  if (UserStore.UserID === '' && UserStore.UserName === '') {
    router.push({
      path: '/auth'
    })
  } else {
    let path = route.path.split('/')
    if (path.length === 2) {
      btnRouter(path[path.length - 1])
    }
    if (path.length === 3) {
      btnRouter(path[path.length - 1], path[path.length - 2])
    }
  }
})
</script>

<style scoped>
.index {
  width: 100%;
}

.top {
  width: 100%;
  height: 5vh;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top ul {
  width: 30%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-left: 10%;
}

.top ul li {
  background-color: rgb(81, 87, 103);
  background-clip: text;
  color: transparent;
  cursor: pointer;
}

.top ul .active {
  background-image: linear-gradient(45deg, rgb(0, 195, 255), rgb(149, 0, 255));
}

.top input[type='text'] {
  width: 15%;
  height: 3vh;
  text-indent: 15px;
  border-radius: 5px;
  border: 1px solid rgb(172, 172, 172);
  transition: all 0.7s;
}

.top input[type="text"]:hover {
  border: 1px solid black;
}

.top input[type="text"]:focus {
  border: 1px solid blue;
  width: 20%;
  outline: none;
}

.buddha {
  background-image: linear-gradient(45deg, rgb(0, 195, 255), rgb(149, 0, 255));
  background-clip: text;
  color: transparent;
  cursor: pointer;
  margin-right: 5%;
}

.content {
  width: 100%;
  background-color: rgb(242, 243, 245);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>